<?php
    date_default_timezone_set('UTC');
?>
<div class="well" >
    <div class="row-fluid">
        <div class="span6"><b><a href="<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'index')); ?>">Volver a Cotizaciones </a></b></div>
        <div class="span6 derecha hide"><b><?php echo $view->fecha; ?></b></div>
    </div>
    <div class="row-fluid centrar">
        <h1><?php if ($view->cotizacionId <= 0){echo "Nueva Cotización";}else{echo "Editar Cotización";} ?></h1>
    </div><br/>
    <div class="contenido contexto">
        <form id="principal">
        <input type="hidden" name="cotizacionId" data-bind="value: cotizacion.cotizacionId"/>
        <div class="row-fluid">
            <div class="span8">
                <div class="span2">Titulo:</div>
                <div class="span10"><input type="text" class="span12" id="titulo" name="titulo" data-bind="value:cotizacion.titulo" /></div>
            </div>
            <div class="span4">
                <div class="span3">Logotipo:</div>
                <div class="span9"><select id="cblogotipo" name="cblogotipo" class="span12" data-bind="value: cotizacion.cblogotipo"></select></div>
            </div>      
        </div>
        <div class="row-fluid">
            <div class="span8">
                <div class="span2">Cliente:</div>
                <div class="span10"><textarea type="text" class="span12" name="cliente" data-bind="value: cotizacion.cliente"></textarea></div>                
            </div>
            <div class="span4">
                <div class="span3">Fecha Expiración:</div>
                <div class="span9"><input id="fexpira" name="fexpira" data-bind="value:cotizacion.fexpira, enabled: editable" /></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">Mensaje de Saludo:</div>
                <div class="row-fluid"><textarea id="comentario1" class="span12" name="comentario1" data-bind="value: cotizacion.comentario1"></textarea></div>
            </div>
            <div class="span6">
                <div class="row-fluid">Condiciones de Servicio:</div>
                <div class="row-fluid"><textarea id="comentario2" class="span12" name="comentario2" data-bind="value: cotizacion.comentario2"></textarea></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">Descripción de Unidad:</div>
                <div class="row-fluid"><textarea id="descunidad" class="span12" name="descunidad" data-bind="value:cotizacion.descunidad"></textarea></div>
            </div>
            <div class="span6">
                <div class="row-fluid">Mensaje de Despedida:</div>
                <div class="row-fluid"><textarea id="comentario3" class="span12" name="comentario3" data-bind="value: cotizacion.comentario3"></textarea></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="row-fluid">Correos:<span class="disabled"><i> jose@mail.com; carlos@mail.com</i></span></div>
                <div class="row-fluid"><textarea id="correos" class="span12" name="correos" data-bind="value: cotizacion.correos" rows="1"></textarea></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="row-fluid">Firma:</div>
                <div class="row-fluid"><textarea id="correos" class="span12" name="firma" data-bind="value: cotizacion.firma" rows="1"></textarea></div>
            </div>
        </div>
        </form>
    </div>
    <br/>
    <div class="contenido contexto">
        <div class="row-fluid">RUTAS:</div>
        <div id="grid"></div>
    </div>
    <div class="contenido contexto centrar">
        <input type="button" class="k-button" name="btnVisualizar" data-bind="click: show, enabled: handleable" value="Visualizar"/>
        <input type="button" class="k-button" name="btnGrabar" data-bind="click: save" value="Guardar"/>
        <input type="button" class="k-button" name="btnGrabarEnviar" data-bind="click: saveSend, enabled: handleable" value="Guardar y Enviar"/>
    </div>
    <div id="window">
        <div class="row-fluid contexto">
            <div class="span12">
                <div class="span4"><input type="radio" name="opcion" value="KM" data-bind="click:mostrarKM, checked: cotizacionDetalle.opcion, enabled: editableDetalle"/>Precio por KM</div>
                <div class="span4"><input type="radio" name="opcion" value="INSUMO" data-bind="click:mostrarINSUMO, checked: cotizacionDetalle.opcion, enabled: editableDetalle"/>Precio por Insumo</div>
            </div>
        </div>
        <div class="row-fluid contexto altoRow">
            <div class="span6">Origen: </div>
            <div class="span6">Destino: </div>
        </div>
        <div class="row-fluid contexto altoRow">
            <div class="span6">
                <div class="span5"><input id="cborigenEstado" class="span12" data-bind="value:cotizacionDetalle.origenEstado"/></div>
                <div class="span5"><input id="cborigen" class="span12" data-bind="value:cotizacionDetalle.origen"/></div>
            </div>
            <div class="span6">
                <div class="span5"><input id="cbdestinoEstado" class="span12" data-bind="value:cotizacionDetalle.destinoEstado"/></div>
                <div class="span5"><input id="cbdestino" class="span12" data-bind="value:cotizacionDetalle.destino"/></div>
            </div>
        </div>
        <div class="contenido">
            <div id="KM" class="row-fluid hide contexto">
                <form id="KM">
                    <div class="row-fluid">
                        <div class="span2">Cantidad Estadia:</div>
                        <div class="span2"><input type="text" class="span12 numero" name="nestadias" data-bind="value: cotizacionDetalle.cantidadEstadia, events: { change: onEstadia }"/></div>
                        <div class="span2">Precio Estadia:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="pestadia" data-bind="value: cotizacionDetalle.precioEstadia, events: { change: onEstadia }"/></div>
                        <div class="span2">Estadias:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="estadias" data-bind="value: cotizacionDetalle.estadias, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Precio por kilometro:</div>
                        <div class="span2"><input type="text" name="pxkm" class="span12 moneda" data-bind="value: cotizacionDetalle.precioxKM, events: {change:onSinIVA}"/></div>
                        <div class="span2">Total de Recorrido:</div>
                        <div class="span2"><input type="text" name="totrecorrido" class="span12 km" data-bind="value: cotizacionDetalle.totalRecorrido, events: {change:onSinIVA}"/></div>
                        <div class="span2">Casetas</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="casetas" data-bind="value: cotizacionDetalle.casetas, events: {change:onSinIVA}"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Salario:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="salario" data-bind="value: cotizacionDetalle.salario, events: {change:onSinIVA}"/></div>
                        <div class="span2">Otros Gastos 1:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="ogastos1" data-bind="value: cotizacionDetalle.otroGasto1, events: {change:onSinIVA}"/></div>
                        <div class="span2">Otros Gastos 2:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="ogastos2" data-bind="value: cotizacionDetalle.otroGasto2, events: {change:onSinIVA}"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2">Maniobras:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="maniobras" data-bind="value: cotizacionDetalle.maniobras, events: {change:onSinIVA}"/></div>
                        <div class="span2">Precio sin IVA:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="psiniva" data-bind="value: cotizacionDetalle.precioSinIVA, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2">% Retención:</div>
                        <div class="span2"><input type="text" class="span12 porc" step="0.1" name="porcretencion" data-bind="value: cotizacionDetalle.porcRetension, events: {change:onRetension}"/></div>
                        <div class="span2">Retención:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="retencion" data-bind="value: cotizacionDetalle.retension, enabled: bloquea2"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2">% IVA:</div>
                        <div class="span2"><input type="text" class="span12 porc" step="0.1" name="porciva" data-bind="value: cotizacionDetalle.porcIva, events: {change:onIVA}"/></div>
                        <div class="span2">IVA:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="iva" data-bind="value: cotizacionDetalle.iva, enabled: bloquea2"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span8"></div>
                        <div class="span2"><b>Precio Final:</b></div>
                        <div class="span2"><input type="text" class="span12 moneda" name="pfinal" data-bind="value: cotizacionDetalle.precioFinal, enabled: bloquea"/></div>
                    </div>
                </form>
            </div>
            <div id="INSUMO" class="row-fluid hide contexto">
                <form id="INSUMO">
                    <div class="row-fluid">
<!--                        <div class="span4"><input type="radio" name="opcionCombustible" value="GM" data-bind="checked: cotizacionDetalle.opcionCombustible"/> Gasolina Magna</div>
                        <div class="span4"><input type="radio" name="opcionCombustible" value="GP" data-bind="checked: cotizacionDetalle.opcionCombustible"/> Gasolina Premium</div>
                        <div class="span4"><input type="radio" name="opcionCombustible" value="GD" data-bind="checked: cotizacionDetalle.opcionCombustible"/> Diesel</div>-->
                        <div class="span2">Combustible:</div>
                        <div class="span4"><input id="cbcombustible" class="span12" data-bind="value:cotizacionDetalle.opcionCombustible"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Precio Combustible:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="precioCombustible" data-bind="value:cotizacionDetalle.precioCombustible, events: { change: onCombustible }"/></div>
                        <div class="span2">Rendimiento KM/Lt:</div>
                        <div class="span2"><input type="text" class="span12 numero" name="rendkmlt" data-bind="value: cotizacionDetalle.rendKmLt, events: { change: onCombustible }"/></div>
                        <div class="span2">Total de Recorrido:</div>
                        <div class="span2"><input type="text" name="totrecorrido" class="span12 km" data-bind="value: cotizacionDetalle.totalRecorrido, events: {change:onCombustible}"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span8"></div>
                        <div class="span2">Gasto Combustible:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="gastocombustible" data-bind="value: cotizacionDetalle.gastoCombustible, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Cantidad Estadia:</div>
                        <div class="span2"><input type="text" class="span12 numero" name="nestadias" data-bind="value: cotizacionDetalle.cantidadEstadia, events: { change: onEstadia }"/></div>
                        <div class="span2">Precio Estadia:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="pestadia" data-bind="value: cotizacionDetalle.precioEstadia, events: { change: onEstadia }"/></div>
                        <div class="span2">Estadias:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="estadias" data-bind="value: cotizacionDetalle.estadias, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Salario:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="salario" data-bind="value: cotizacionDetalle.salario, events: {change:onGastosxINSUMO}"/></div>
                        <div class="span2">Otros Gastos 1:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="ogastos1" data-bind="value: cotizacionDetalle.otroGasto1, events: {change:onGastosxINSUMO}"/></div>
                        <div class="span2">Otros Gastos 2:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="ogastos2" data-bind="value: cotizacionDetalle.otroGasto2, events: {change:onGastosxINSUMO}"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span2">Casetas</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="casetas" data-bind="value: cotizacionDetalle.casetas, events: {change:onGastosxINSUMO}"/></div>
                        <div class="span2">Maniobras:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="maniobras" data-bind="value: cotizacionDetalle.maniobras, events: {change:onGastosxINSUMO}"/></div>
                        <div class="span2">Total Insumos:</div>
                        <div class="span2"><input type="text" class="span12 numero" name="totalinsumos" data-bind="value: cotizacionDetalle.totalInsumos, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2"><input type="radio" name="tipoUtilidad" value="UKM" data-bind="click:mostrarUKM, checked: cotizacionDetalle.tipoUtilidad"/> Utilidad x KM</div>
                        <div class="span2"><input type="text" class="span12 numero" step="0.1" name="utilidadKm" data-bind="value: cotizacionDetalle.utilidadKm, events: {change:onSinIVAxINSUMO}"/></div>
                        <div class="span2">Utilidad x Viaje</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="utilidadViaje" data-bind="value: cotizacionDetalle.utilidadViaje, enabled: bloquea""/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2"><input type="radio" name="tipoUtilidad" value="UPC" data-bind="click:mostrarUPC, checked: cotizacionDetalle.tipoUtilidad"/> Utilidad x %</div>
                        <div class="span2"><input type="text" class="span12 porc" step="0.1" name="utilidadPorc" data-bind="value: cotizacionDetalle.utilidadPorc, events: {change:onSinIVAxINSUMO}"/></div>
                        <div class="span2">Utilidad</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="utilidad" data-bind="value: cotizacionDetalle.utilidad, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span8"></div>
                        <div class="span2">Precio sin IVA:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="psiniva" data-bind="value: cotizacionDetalle.precioSinIVA, enabled: bloquea"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2">% Retención:</div>
                        <div class="span2"><input type="text" class="span12 porc" step="0.1" name="porcretencion" data-bind="value: cotizacionDetalle.porcRetension, events: {change:onRetension}"/></div>
                        <div class="span2">Retención:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="retencion" data-bind="value: cotizacionDetalle.retension, enabled: bloquea2"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"></div>
                        <div class="span2">% IVA:</div>
                        <div class="span2"><input type="text" class="span12 porc" step="0.1" name="porciva" data-bind="value: cotizacionDetalle.porcIva, events: {change:onIVA}"/></div>
                        <div class="span2">IVA:</div>
                        <div class="span2"><input type="text" class="span12 moneda" name="iva" data-bind="value: cotizacionDetalle.iva, enabled: bloquea2"/></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span8"></div>
                        <div class="span2"><b>Precio Final:</b></div>
                        <div class="span2"><input type="text" class="span12 moneda" name="pfinal" data-bind="value: cotizacionDetalle.precioFinal, enabled: bloquea"/></div>
                    </div>
                </form>
            </div>
        </div>
        <div class="contexto centrar">
            <div class="row-fluid">
                <input type="button" class="k-button" name="btnGrabarDetalle" data-bind="click: saveDetail" value="Guardar"/>
                <input type="button" class="k-button" name="btnCancel" data-bind="click: cancel" value="Cancelar"/>
            </div>
        </div>
    </div>
</div>
<script type="text/x-kendo-template" id="template">
    <div class="toolbar contexto">
        <input type="button" class="k-button" name="btnNew" data-bind="click: add" value="Nuevo"/>
        <input type="button" class="k-button" name="btnEdit" data-bind="click: edit" value="Editar"/>
        <input type="button" class="k-button" name="btnDelete" data-bind="click: delete" value="Eliminar"/>
    </div>
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#fexpira").kendoDatePicker({ format: "dd/MM/yyyy" });
        $('#fexpira').attr('disabled','disabled');
        var windowPop = $("#window").kendoWindow({
			        width: "850px",
			        title: "Cotización de Ruta",
			        modal: true,
			        resizable: false,
			        actions: ["Close"],
			        visible: false,
			    });
        
        //$(".botonesKUI").kendoButton();
        
        $(".km").kendoNumericTextBox({ min: 0, format: "#.00 km" });
        $(".porc").kendoNumericTextBox({ min: 0, format: "#.00 \\%" });
        $(".numero").kendoNumericTextBox({ min: 0, format: "#.00" });
        $(".moneda").kendoNumericTextBox({ min: 0, format: "c", decimals: 2 });
        $(".entero").kendoNumericTextBox({ min: 0, decimals: 0 });
        
        var dsRutas = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'getRutasList')); ?>",
                        success: function (resultado){
                            options.success(resultado);
                        }
                    });
                }
            },
            schema: {
                model: {
                    id: "idRuta",
                    fields: {
                            idRuta: { type: "int"},
                            Nombre: { type: "string" }
                    }
                }
            }
        });
        
        var dsRutasEstado = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'getRutasEstadoList')); ?>",
                        success: function (resultado){
                            options.success(resultado);
                        }
                    });
                }
            },
            schema: {
                model: {
                    id: "idRuta",
                    fields: {
                            idRuta: { type: "int"},
                            Nombre: { type: "string" }
                    }
                }
            }
        });
        
        $("#cborigenEstado").kendoDropDownList({
            dataTextField: "nombre",
            dataValueField: "idRuta",
            dataSource: dsRutasEstado,
            suggest: true,
            index: 0,
            optionLabel: "Seleccione"
        });
                    
        $("#cbdestinoEstado").kendoDropDownList({
            dataTextField: "nombre",
            dataValueField: "idRuta",
            dataSource: dsRutasEstado,
            suggest: true,
            index: 0,
            optionLabel: "Seleccione"
        });
        
        $("#cborigen").kendoDropDownList({
            dataTextField: "nombre",
            dataValueField: "idRuta",
            dataSource: dsRutas,
            suggest: true,
            index: 0,
            optionLabel: "Seleccione"
        });
                    
        $("#cbdestino").kendoDropDownList({
            dataTextField: "nombre",
            dataValueField: "idRuta",
            dataSource: dsRutas,
            suggest: true,
            index: 0,
            optionLabel: "Seleccione"
        });
        
        $("#cbcombustible").kendoDropDownList({
            dataTextField: "name",
            dataValueField: "id",
            dataSource: [{id:"GM", name:"Gasolina Magna"}, {id:"GP", name:"Gasolina Premium"}, {id:"GD", name:"Gasolina Diesel"}]
        });
                
        $("#cblogotipo").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Logo 1", value: 1 },
                { text: "Logo 2", value: 2 },
                { text: "Logo 3", value: 3 }
            ]
        });
              
        var viewModel = kendo.observable({            
            editable: function(){
                if (viewModel.get("cotizacion.cotizacionId") == 0){
                    return true;
                }else{
                    return false;
                }
            },
            editableDetalle: function(){
                if (viewModel.get("cotizacionDetalle.idCotizacionDetalle") == 0){
                    return true;
                }else{
                    return false;
                }
            },
            handleable: function(){
                if (viewModel.get("cotizacion.cotizacionId") == 0){
                    return false;
                }else{
                    return true;
                }
            },
            bloquea: true,
            bloquea2: false,
            envia: false,
            cotizacion:{
                cotizacionId: <?php echo $view->cotizacionId; ?>,
                cblogotipo: "<?php echo $view->cblogotipo; ?>",
                fecha: new Date("<?php echo $view->fecha; ?>"),
                fexpira: new Date("<?php echo $view->fechaexpiracion; ?>"),
                cliente: "<?php echo $view->cliente; ?>",
                titulo: "<?php echo $view->titulo; ?>",
                comentario1: "<?php echo $view->comentario1; ?>",
                comentario2: "<?php echo $view->comentario2; ?>",
                comentario3: "<?php echo $view->comentario3; ?>",
                descunidad: "<?php echo $view->descunidad; ?>",
                correos: "<?php echo $view->correos; ?>",
                firma: "<?php echo $view->firma; ?>"
            },
            cotizacionDetalle:{
                idCotizacionDetalle: 0,
                origen: 0,
                destino: 0,
                opcion: "KM",
                precioxKM: 0,
                totalRecorrido: 0,
                casetas: 0,
                salario: 0,
                otroGasto1: 0,
                otroGasto2: 0,
                maniobras: 0,
                cantidadEstadia: 0,
                precioEstadia: 0,
                estadias: 0,
                totalInsumos: 0,
                precioSinIVA: 0,
                porcRetension: 0,
                retension: 0,
                porcIva: 0,
                iva: 0,
                precioFinal: 0,
                precioCombustible: 0, /**/
                opcionCombustible: "GM",
                tipoUtilidad: "UKM",
                rendKmLt: 0,
                gastoCombustible: 0,
                utilidadKm: 0,
                utilidadViaje: 0,
                utilidadPorc: 0,
                utilidad: 0,
            },
            onEstadia: function(){
                var estadias = viewModel.get("cotizacionDetalle.cantidadEstadia")*viewModel.get("cotizacionDetalle.precioEstadia");
                viewModel.set("cotizacionDetalle.estadias", estadias);
                this.onSinIVA();
            },
            onEstadiaxINSUMO: function(){
                var estadias = viewModel.get("cotizacionDetalle.cantidadEstadia")*viewModel.get("cotizacionDetalle.precioEstadia");
                viewModel.set("cotizacionDetalle.estadias", estadias);
                this.onGastosxINSUMO();
            },
            onSinIVA: function(){
                var gastos =    viewModel.get("cotizacionDetalle.precioxKM") * 
                                viewModel.get("cotizacionDetalle.totalRecorrido") + 
                                viewModel.get("cotizacionDetalle.casetas") + 
                                viewModel.get("cotizacionDetalle.salario") + 
                                viewModel.get("cotizacionDetalle.otroGasto1") + 
                                viewModel.get("cotizacionDetalle.otroGasto2") + 
                                viewModel.get("cotizacionDetalle.maniobras");
                var estadias = viewModel.get("cotizacionDetalle.estadias");
                viewModel.set("cotizacionDetalle.precioSinIVA", gastos + estadias);
                this.onRetension();
            },
            onGastosxINSUMO: function(){
                var gastos =    viewModel.get("cotizacionDetalle.gastoCombustible") + 
                                viewModel.get("cotizacionDetalle.estadias") + 
                                viewModel.get("cotizacionDetalle.casetas") + 
                                viewModel.get("cotizacionDetalle.salario") + 
                                viewModel.get("cotizacionDetalle.otroGasto1") + 
                                viewModel.get("cotizacionDetalle.otroGasto2") + 
                                viewModel.get("cotizacionDetalle.maniobras");
                viewModel.set("cotizacionDetalle.totalInsumos", gastos);
                this.onSinIVAxINSUMO();
            },
            onSinIVAxINSUMO: function(){
                var utilidadViaje = viewModel.get("cotizacionDetalle.totalRecorrido")*viewModel.get("cotizacionDetalle.utilidadKm");
                var utilidad = (viewModel.get("cotizacionDetalle.utilidadPorc")/100)*viewModel.get("cotizacionDetalle.totalInsumos");
                var gastos =    viewModel.get("cotizacionDetalle.totalInsumos") + 
                                utilidadViaje + utilidad;
                viewModel.set("cotizacionDetalle.utilidadViaje", utilidadViaje);
                viewModel.set("cotizacionDetalle.utilidad", utilidad);
                viewModel.set("cotizacionDetalle.precioSinIVA", gastos);
                this.onRetension();
            },
            onRetension: function(){
                var retension = viewModel.get("cotizacionDetalle.precioSinIVA") * (viewModel.get("cotizacionDetalle.porcRetension")/100);
                viewModel.set("cotizacionDetalle.retension", retension);
                this.onIVA();
            },
            onIVA: function(){
                var iva = viewModel.get("cotizacionDetalle.precioSinIVA") * (viewModel.get("cotizacionDetalle.porcIva")/100);
                viewModel.set("cotizacionDetalle.iva", iva);
                this.onTotal();
            },
            onTotal: function(){
                var total = viewModel.get("cotizacionDetalle.precioSinIVA") - viewModel.get("cotizacionDetalle.retension") + viewModel.get("cotizacionDetalle.iva");
                viewModel.set("cotizacionDetalle.precioFinal", total);
            },
            onCombustible: function(){
                var gastocombustible = (viewModel.get("cotizacionDetalle.totalRecorrido")/viewModel.get("cotizacionDetalle.rendKmLt"))*viewModel.get("cotizacionDetalle.precioCombustible");
                viewModel.set("cotizacionDetalle.gastoCombustible", gastocombustible);
            },
            detalleReset: function(){
                this.set("cotizacionDetalle.idCotizacionDetalle", 0);
                this.set("cotizacionDetalle.origen", 0);
                this.set("cotizacionDetalle.destino", 0);
                this.set("cotizacionDetalle.opcion", "KM");
                this.set("cotizacionDetalle.precioxKM", 0);
                this.set("cotizacionDetalle.totalRecorrido", 0);
                this.set("cotizacionDetalle.casetas", 0);
                this.set("cotizacionDetalle.salario", 0);
                this.set("cotizacionDetalle.otroGasto1", 0);
                this.set("cotizacionDetalle.otroGasto2", 0);
                this.set("cotizacionDetalle.maniobras", 0);
                this.set("cotizacionDetalle.cantidadEstadia", 0);
                this.set("cotizacionDetalle.precioEstadia", 0);
                this.set("cotizacionDetalle.estadias", 0);
                this.set("cotizacionDetalle.precioSinIVA", 0);
                this.set("cotizacionDetalle.porcRetension", 0);
                this.set("cotizacionDetalle.retension", 0);
                this.set("cotizacionDetalle.porcIva", 0);
                this.set("cotizacionDetalle.iva", 0);
                this.set("cotizacionDetalle.precioFinal", 0);
                this.set("cotizacionDetalle.precioCombustible", 0);
                this.set("cotizacionDetalle.opcionCombustible", "GM");
                this.set("cotizacionDetalle.rendKmLt", 0);
                this.set("cotizacionDetalle.totalInsumos", 0);
                this.set("cotizacionDetalle.utilidadKm", 0);
                this.set("cotizacionDetalle.utilidadViaje", 0);
                this.set("cotizacionDetalle.utilidadPorc", 0);
                this.set("cotizacionDetalle.gastoCombustible", 0);
            },
            mostrarKM: function(){
                this.set("cotizacionDetalle.opcion","KM");
                $("#window_wnd_title").html("Cotización de Ruta por KM");
                $("div#INSUMO").hide();
                $("div#KM").show();
            },
            mostrarINSUMO: function(){
                this.set("cotizacionDetalle.opcion","INSUMO");
                $("#window_wnd_title").html("Cotización de Ruta por INSUMO");
                $("div#KM").hide();
                $("div#INSUMO").show();                
            },
            mostrarUKM: function(){
                this.set("cotizacionDetalle.utilidadPorc",0);
                this.set("cotizacionDetalle.utilidad",0);
            },
            mostrarUPC: function(){
                this.set("cotizacionDetalle.utilidadKm",0);
                this.set("cotizacionDetalle.utilidadViaje",0);
            },
            showKM: function(){
                if (viewModel.get("cotizacionDetalle.opcion") == "KM"){
                    viewModel.mostrarKM();
                }else{
                    viewModel.mostrarINSUMO();
                }
            },
            add: function(){
                if (viewModel.get("cotizacion.cotizacionId") == 0){
                    if (confirm("Ustede debe de guardar primero la cotización. Desea guardarlo?")){
                        viewModel.save();
                    }
                }else{
                    this.detalleReset();
                    $("#window_wnd_title").html("Cotización de Ruta por KM");
                    $("#windowPop").removeClass("hide");
                    this.showKM();
                    windowPop.data("kendoWindow").center().open();
                }                
            },
            edit: function(){
                if (this.select()){
                    var grid = $("#grid").data("kendoGrid");
                    var data = grid.dataItem(grid.select());
                    this.set("cotizacionDetalle.idCotizacionDetalle", data.idCotizacionDetalle);
                    this.set("cotizacionDetalle.origen", data.idOrigen);
                    this.set("cotizacionDetalle.destino", data.idDestino);
                    this.set("cotizacionDetalle.opcion", data.tipoCalculo);
                    this.set("cotizacionDetalle.precioxKM", data.precioxKM);
                    this.set("cotizacionDetalle.totalRecorrido", data.totaRecorrido);
                    this.set("cotizacionDetalle.casetas", data.casetas);
                    this.set("cotizacionDetalle.salario", data.salario);
                    this.set("cotizacionDetalle.otroGasto1", data.otrosGastos1);
                    this.set("cotizacionDetalle.otroGasto2", data.otrosGastos2);
                    this.set("cotizacionDetalle.maniobras", data.maniobras);
                    this.set("cotizacionDetalle.cantidadEstadia", data.cantidadEstadia);
                    this.set("cotizacionDetalle.precioEstadia", data.precioEstadia);
                    this.set("cotizacionDetalle.estadias", data.estadia);
                    this.set("cotizacionDetalle.precioSinIVA", data.precioSinIva);
                    this.set("cotizacionDetalle.porcRetension", data.porcRetension);
                    this.set("cotizacionDetalle.retension", data.retension);
                    this.set("cotizacionDetalle.porcIva", data.porcIva);
                    this.set("cotizacionDetalle.iva", data.iva);
                    this.set("cotizacionDetalle.precioFinal", data.precioFinal);
                    this.set("cotizacionDetalle.precioCombustible", data.precioCombustible);
                    this.set("cotizacionDetalle.opcionCombustible", data.opcionCombustible);
                    this.set("cotizacionDetalle.rendKmLt", data.rendKmLt);
                    this.set("cotizacionDetalle.totalInsumos", data.totalInsumo);
                    this.set("cotizacionDetalle.utilidadKm", data.utilidadKm);
                    this.set("cotizacionDetalle.utilidadViaje", data.utilidadViaje);
                    this.set("cotizacionDetalle.utilidadPorc", data.utilidadPorc);
                    this.set("cotizacionDetalle.gastoCombustible", data.gastoCombustible);
                    this.showKM();
                    if (data.tipoCalculo == "KM"){
                        $("#window_wnd_title").html("Cotización de Ruta por KM");
                    }else{
                        $("#window_wnd_title").html("Cotización de Ruta por Insumo");
                    }
                    
                    $("#windowPop").removeClass("hide");
                    windowPop.data("kendoWindow").center().open();
                }
            },
            delete: function(){
                if (this.select()){
                    if (confirm("Desea eliminar la ruta seleccionada?")){
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            data: 'idCotizacionDetalle='+viewModel.get("cotizacionDetalle.idCotizacionDetalle")+'&idCotizacion='+viewModel.get("cotizacion.cotizacionId"),
                            url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'deleteCotizacionDetalle')); ?>",
                            success: function (json){
                                if (json.Mensaje != undefined){
                                    alert(json.Mensaje);
                                    $("#grid").data("kendoGrid").dataSource.read();
                                }else{
                                    alert(gErrorTransaccion);
                                }
                            },
                            error: function(){
                                alert(gErrorTransaccion);
                            }
                        });
                    }
                }
            },
            select: function(){
                var grid = $("#grid").data("kendoGrid");
                if (grid.dataItem(grid.select()) != undefined){
                    this.set("cotizacionDetalle.idCotizacionDetalle", grid.dataItem(grid.select()).idCotizacionDetalle);
                    return true;
                }else{
                    this.set("cotizacionDetalle.idCotizacionDetalle", 0);
                    alert("Seleccione un item");
                    return false;
                }
            },
            valid: function(){
                var result = true;
                if (this.get("cotizacion.cliente") == ""){
                    alert("Ingrese un cliente");
                    result = false;
                }else if (this.get("cotizacion.titulo") == ""){
                    alert("Ingrese un titulo");
                    result = false;
                }
                return result;
            },
            save: function(){
                var param = $.toJSON($("form#principal").serializeObject());
                if (param.length > 2){
                    if (this.valid()){
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            data: 'form='+param,
                            url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'saveCotizacion')); ?>",
                            success: function (json){
                                if (json.Mensaje != undefined){
                                    alert(json.Mensaje);
                                    if (json.Id != undefined){
                                        window.open("<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'cotizacion')).'cotizacion/'; ?>" + json.Id, "_self");
                                    }
                                }else{
                                    alert(gErrorTransaccion);
                                }
                            },
                            error: function(){
                                alert(gErrorTransaccion);
                            }
                        });
                    }
                }
            },
            validDetalle: function(){
                var result = true;
                if (this.get("cotizacionDetalle.origen") < 1){
                    alert("Seleccione un Origen");
                    result = false;
                }else if (this.get("cotizacionDetalle.destino") < 1){
                    alert("Selecione un Destino");
                    result = false;
                }
                return result;
            },
            saveDetail: function(){
                this.set("bloquea", true);
                this.set("bloquea2", true);
                var param = (this.get("cotizacionDetalle.opcion") == "KM") ? $.toJSON($("form#KM").serializeObject()) : $.toJSON($("form#INSUMO").serializeObject()) ;
                this.set("bloquea", true);
                this.set("bloquea2", false);
                if (param.length > 2){
                    if (this.validDetalle()){
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            data: 'form='+param+'&idCotizacion='+this.get("cotizacion.cotizacionId")+'&idCotizacionDetalle='+this.get("cotizacionDetalle.idCotizacionDetalle")+'&origen='+this.get("cotizacionDetalle.origen")+'&destino='+this.get("cotizacionDetalle.destino")+'&tipoPrecio='+this.get("cotizacionDetalle.opcion"),
                            url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'saveDetalleCotizacion')); ?>",
                            success: function (json){
                                if (json.Mensaje != undefined){
                                    alert(json.Mensaje);
                                    if (json.Id > 0){
                                        viewModel.set("cotizacionDetalle.idCotizacionDetalle", json.Id);
                                    }
                                    $("#grid").data("kendoGrid").dataSource.read();
                                }else{
                                    alert(gErrorTransaccion);
                                }
                            },
                            error: function(){
                                alert(gErrorTransaccion);
                            }
                        });
                    }
                }
            },
            show: function(){
                var idCotizacion = this.get("cotizacion.cotizacionId");
                if (idCotizacion > 0){
                    window.open("<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'generatePDF')).'idCotizacion/'; ?>" + idCotizacion, "_blank");
                }
            },
            saveSend: function(){
                var param = $.toJSON($("form#principal").serializeObject());
                if (param.length > 2){
                    if (this.valid()){
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            data: 'form='+param,
                            url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'saveCotizacion')); ?>",
                            success: function (json){
                                if (json.Mensaje != undefined){
                                    $.ajax({
                                        type: "POST",
                                        dataType: "json",
                                        data: 'idCotizacion='+viewModel.get("cotizacion.cotizacionId"),
                                        url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'saveSendCotizacion')); ?>",
                                        success: function (json){
                                            if (json.Mensaje != undefined){
                                                alert(json.Mensaje);
                                            }else{
                                                alert(gErrorTransaccion);
                                            }
                                        },
                                        error: function(){
                                            alert(gErrorTransaccion);
                                        }
                                    });
                                }else{
                                    alert(gErrorTransaccion);
                                }
                            },
                            error: function(){
                                alert(gErrorTransaccion);
                            }
                        });
                    }
                }
            },
            cancel: function(){
                $("#window").data("kendoWindow").close();
            }
        });
        
        var dsGrid = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: function (options) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        data: 'idCotizacion='+viewModel.get("cotizacion.cotizacionId"),
                        url: "<?php echo $view->url(array('controller' => 'Cotizador', 'action' => 'getListaDetalle')); ?>",
                        success: function (resultado){
                            options.success(resultado);
                        }
                    });
                }
            },
            schema: {
                model: {
                    id: "idCotizacionDetalle",
                    fields: {
                        idCotizacion: { type: "number"},
                        idOrigen: { type: "number"},
                        origen: { type: "string"},
                        idDestino: { type: "number"},
                        destino: { type: "string"},
                        tipoCalculo: { type: "string" },
                        precioxKM: { type: "number"},
                        totaRecorrido: { type: "number"},
                        casetas: { type: "number"},
                        salario: { type: "number"},
                        otrosGastos1: { type: "number"},
                        otrosGastos2: { type: "number"},
                        maniobras: { type: "number"},
                        cantidadEstadia: { type: "number"},
                        precioEstadia: { type: "number"},
                        estadia: { type: "number"},
                        precioSinIva: { type: "number"},
                        porcRetension: { type: "number"},
                        retension: { type: "number"},
                        porcIva: { type: "number"},
                        iva: { type: "number"},
                        precioFinal: { type: "number"},
                        precioCombustible: { type: "number"},
                        opcionCombustible: { type: "string"},
                        rendKmLt: { type: "number"},
                        gastoCombustible: { type: "number"},
                        totalInsumo: { type: "number"},
                        utilidadKm: { type: "number"},
                        utilidadViaje: { type: "number"},
                        utilidadPorc: { type: "number"},
                        utilidad: { type: "number"}
                    }
                }
            },
            pageSize: 10
        });
        
        $("#grid").kendoGrid({
            dataSource: dsGrid,
            selectable: "row",
            toolbar: kendo.template($("#template").html()),
            columns: [
                { field: "origen", title: "Origen", width: "100px" },
                { field: "destino", title: "Destino", width: "100px" },
                { field: "tipoCalculoDesc", title: "Tipo Cálculo", width: "100px" },
                { field: "retension", title: "Retención", width: "80px", format: "{0:c2}", attributes: { class: "derecha" } },
                { field: "iva", title: "IVA", width: "80px", format: "{0:c2}", attributes: { class: "derecha" } },
                { field: "precioFinal", title: "Precio Final", width: "100px", format: "{0:c2}", attributes: { class: "derecha" } }
            ]
        });
        
        kendo.bind($(".contexto"), viewModel);
    });
</script>